<template>
    <x-popup v-model="showModal" top="30vh" :auto-hide-tab-bar="autoHideTabBar">
        <view class="flex flex-center px-4">
            <view class="w-100px">
            </view>
            <view class="flex-1 h8 font-weight-600 p-10 text-center">快速登录</view>
            <view class="w-100px"></view>
        </view>
        <login ref="loginRef" @success="success" @fail="hide" @wx-login="wxLogin"/>
    </x-popup>
</template>

<script>
export default {
    props: {
        autoHideTabBar: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showModal: false,
            wxOptions:{}
        }
    },
    created() {
    },
    methods: {
        show(options) {
            if (options) {
                this.wxOptions = options
            }
            this.showModal = true;
            this.$nextTick(()=>{
                this.$refs.loginRef.show();
            })
        },
        hide() {
            this.showModal = false;
        },
        success(){
            this.hide();
            this.$emit('success');
        },
        wxLogin(){
            this.$utils.wxLogin(this,this.wxOptions)
        }
    }
}
</script>

<style lang="scss" scoped>
.w-100px {
    width: 100px;
}

.flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.flex-center{
    align-items: center;
    justify-content: center;
}
.h8{
    font-size: 28rpx;
}
.font-weight-600{
    font-weight: 600;
}
.px-4{
    padding-left: 40rpx;
    padding-right: 40rpx;
}
.px-10,
.p-10{
    padding-left: 60rpx;
    padding-right: 60rpx;
}
.py-10,
.p-10{
    padding-top: 60rpx;
    padding-bottom: 60rpx;
}
.text-center{
    text-align: center;
}
</style>